<template>
  <div class="container">
    <div style="height: 10px"></div>
    <view v-show="flag" class="all">
      <!-- 头部选项卡 -->
      <!-- <view class="head-nav">
        <view :class="navIndex == 0 ? 'activite' : ''" @click="checkIndex(0)"
          >经验</view
        >
        <view :class="navIndex == 1 ? 'activite' : ''" @click="checkIndex(1)"
          >维保</view
        >
      </view> -->
      <!-- 内容切换 -->
      <view class="content" v-if="navIndex == 0">
        <div class="card" v-for="item in left">
          <div style="height: 10px"></div>
          <div class="padding">
            <div class="topFlex">
              <!-- <image :src="item.img" mode="scaleToFill" /> -->
               <div class="imgs">{{ item.adviceType==2?'经验':'维保' }}</div>
              <div style="width: 10px"></div>
              <div>
                <div class="name">{{ item.expertName??"暂无" }}</div>
                <div style="height: 10rpx"></div>
                <div class="date">{{ item.createTime }}</div>
              </div>
            </div>
            <div style="height: 10rpx"></div>
            <!--  -->
            <div class="title">{{ item.adviceTitle }}</div>
            <div style="height: 10rpx"></div>
            <div class="contents">{{ item.adviceContent }}</div>
            <div style="height: 10rpx"></div>
            <!--  -->
          </div>
        </div>
        <div style="height: 3vh"></div>
        <div class="btnRound" @click="addQuest">
          <div></div>
          <div class="btn" @click="toggleFlag">
            <div>#</div>
            <div>分享经验</div>
          </div>
        </div>
      </view>
      <view class="content" v-if="navIndex == 1">
        <div class="card" v-for="item in left">
          <div style="height: 10px"></div>
          <div class="padding">
            <!--  -->
            <div class="title">{{ item.adviceTitle }}</div>
            <div style="height: 10rpx"></div>
            <div class="contents">{{ item.adviceContent }}</div>
            <div style="height: 10rpx"></div>
            <!--  -->
          </div>
        </div>
        <div style="height: 3vh"></div>
      </view>
    </view>
    <view class="alls" v-if="!flag">
      <div class="form-flex">
        <div style="width: 30%; color: #1a512c; font-weight: 500">经验标题</div>
        <div class="borders">
          <div style="height: 5rpx"></div>
          <input type="text" v-model="title" placeholder="请输入经验标题" />
          <div style="height: 5rpx"></div>
        </div>
      </div>
      <div style="height: 10px;"></div>
      <div class="form-flex">
        <div style="width: 30%; color: #1a512c; font-weight: 500">经验内容</div>
        <div class="borders">
          <div style="height: 5rpx"></div>
          <textarea v-model="content"></textarea>
          <div style="height: 5rpx"></div>
        </div>
      </div>
      <div style="height: 30px;"></div>
      <div class="footer">
                    <div class="button-footer" @click="cancel">取消</div>
                    <div class="button-footer" @click="toggleFlags">分享</div>
                </div>
    </view>
  </div>
</template>
<script>
import { adviceList,expertAdviceAdd } from '../api/api.js';
export default {
  data() {
    return {
      indent: '',
            list: [],
            navIndex: 0,
            adviceType: 2,
      left:[],
      flag: true,
      title:'',
      content:''
    };
  },
  methods: {
    checkIndex(index) {
      this.navIndex = index;
    },
    toggleFlag() {
      this.flag = false;
    },
    toggleFlags(){
      expertAdviceAdd({
        adviceType:2,
        adviceTitle:this.title,
        adviceContent:this.content,
      }).then(res=>{
        console.log(res,'res');
        if(res.data.code==200){
          uni.showToast({
            title: res.data.msg,
            duration: 2000
          });
          this.aList();
          setTimeout(()=>{
            this.flag = true;
            this.title = '';
            this.content = '';
          },1000)
        }else{
          uni.showToast({
            title: res.data.msg,
            duration: 2000,
            icon:'none'
          });
        }
      })
    },
    cancel(){
      this.flag = true;
    },
    aList() {
            adviceList({
                adviceType: this.adviceType
            }).then(res => {
                console.log(res, 'adviceList');
                if (res.data.code == 200) {
                    this.left = res.data.rows;
                    console.log(this.left, 'list');
                    // 1维保2经验
                }
            })
        },
        checkIndex(i) {
            if (i == 0) {
                this.adviceType = 2;
                this.navIndex = i;
                this.aList()
            } else {
                this.adviceType = 1;
                this.navIndex = i;
                this.aList()
            }

        }
  },
  onLoad() { },
    onShow() {
        this.indent = uni.getStorageSync('pageIndent');
        this.aList();
    }
};
</script>
<style lang="scss">
.container {
  height: 100vh;
  width: 100vw;
  background: #f3f3f3;
  color: #000000;
  overflow-y: scroll;
}
.head-nav {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.activite {
  border-bottom: 2px solid #1a512c;
}
.card {
  width: 90%;
  margin-left: 5%;
  background: #fff;
  border-radius: 10px;
  margin-top: 10px;
}
.padding {
  width: 90%;
  margin-left: 5%;
}
.alls {
  width: 90%;
  margin-left: 5%;
}
.date {
  font-size: 12px;
  color: #8e8e8e;
  font-weight: 400;
}
.name {
  font-size: 16px;
  color: #000000;
  font-weight: 500;
}
.title {
  font-size: 14px;
  color: #000000;
  font-weight: 700;
  white-space: pre-line;
  word-wrap: break-word;
}
.contents {
  font-size: 12px;
  color: gray;
  letter-spacing: 3px;
  font-weight: 400;
  // width: 90%;
  white-space: pre-line;
  word-wrap: break-word;
}
.topFlex {
  display: flex;
  align-items: center;
}
.imgs {
  background-color: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  width: 65rpx;
  height: 65rpx;
  font-size: 13px;
  border-radius: 50%;
}
.btn {
  display: flex;
  align-items: center;
  background: #000000;
  color: #fff;
  border-radius: 7px;
  height: 60rpx;
  justify-content: center;
  position: absolute;
  width: 100px;
  z-index: 9999;
  bottom: 10%;
  right: 10px;
}
.btnRound {
  width: 90%;
  margin-left: 5%;
  display: flex;
  justify-content: space-between;
}
.form-flex {
  display: flex;
  align-items: center;
  width: 100%;
}
.borders {
  border: 1px solid #1a512c;
  border-radius: 5px;
  text-align: center;
  width: 70%;
}
.footer{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.button-footer{
    width: 48%;
    height: 50px;
    background: #46A164;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    font-weight: 500;
    border-radius: 10px;
}
</style>
